<template>
    <div class="index-wrap">
        <HeaderTop></HeaderTop><!--页面头部图片-->
        <Header></Header><!--页面头部-->
        <ImportantPic></ImportantPic><!--页面头部-->

        <div class="content-line"><!--第一行-->
            <div class="carousel-wrap">
                <!--轮播图片-->
                <Carousel></Carousel>
            </div>
            <div class="news-wrap">
                <!--领导动态-->
                <News></News>
            </div>
        </div>

        <div class="content-line"><!--第二行-->
            <div class="tools-wrap">
                <!--常用工具-->
                <Tools></Tools>
            </div>
            <div class="message-box">
                <!--通知栏-->
                <Message></Message>
            </div>
            <div class="top-box">
                <!--信息排行-->
                <Top></Top>
            </div>
        </div>

        <div class="content-line"><!--第三行-->
            <div class="jxzyk-wrap">
                <!--警用资源库-->
                <PoliceResource></PoliceResource>
                <div style="height: 10px"></div>
                <!--便警服务-->
                <Service></Service>
            </div>
            <div class="second-new-box">
                <div class="line">
                    <!--中间两个图片，党史教育相关-->
                    <ImgLink></ImgLink>
                </div>
                <div class="line">
                    <!--中间两个图片，党史教育相关-->
                    <ImgInfo></ImgInfo>
                </div>
                <div class="line">
                    <div class="first">
                        <!--派出所信息-->
                        <PoliceStation></PoliceStation>
                    </div>
                    <div class="second">
                        <!--科室信息-->
                        <DepartmentInfo></DepartmentInfo>
                    </div>
                </div>
                <div class="line">
                    <div class="first">
                        <!--刑警信息-->
                        <CriminalPolice></CriminalPolice>
                    </div>
                    <div class="second">
                        <!--法制信息-->
                        <LegalInfo></LegalInfo>
                    </div>
                </div>
                <div class="line">
                    <!--导航-->
                    <Navigation></Navigation>
                </div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
    import HeaderTop from '../components/headertop';
    import Header from '../components/header';
    import ImportantPic from '../components/importantpic';
    import Carousel from '../components/carousel';
    import News from '../components/leaderd';
    import PoliceResource from '../components/police-resource';
    import Service from '../components/service';
    import Footer from '../components/footer';
    import PoliceStation from '../components/policestation';
    import DepartmentInfo from '../components/departmentinfo';
    import CriminalPolice from '../components/criminalpolice';
    import LegalInfo from '../components/legalinfo';
    import Tools from '../components/tools';
    import Message from '../components/message';
    import ImgLink from '../components/img-link';
    import Navigation from '../components/navigation';
    import Top from '../components/top';
    import ImgInfo from '../components/imginfo';

    export default {
        name: "index",
        data() {
            return {}
        },
        components: {
            HeaderTop,
            Header,
            ImportantPic,
            Carousel,
            News,
            PoliceResource,
            Footer,
            PoliceStation,
            DepartmentInfo,
            CriminalPolice,
            LegalInfo,
            Tools,
            Message,
            Service,
            ImgLink,
            Navigation,
            Top,
            ImgInfo
        }
    }
</script>

<style scoped>
    .index-wrap {
        min-width: 1200px;
    }

    .content-line {
        display: flex;
        flex-wrap: nowrap;
        width: 80%;
        margin: 10px auto 0 auto;
        justify-content: space-around;
    }

    .carousel-wrap {
        width: 49%;
        height: 400px;
    }

    .news-wrap {
        width: 49%;
        height: 400px;
    }

    .jxzyk-wrap {
        width: 19%;
    }

    .tools-wrap {
        width: 19%;
    }

    .second-new-box {
        width: 79%;
    }

    .second-new-box .line {
        display: flex;
        justify-content: space-around;
        flex-wrap: nowrap;
        margin-bottom: 10px;
    }

    .second-new-box .line .first {
        width: 49%;
    }

    .second-new-box .line .second {
        width: 49%;
    }

    .message-box {
        width: 59%;
    }

    .top-box {
        width: 19%;
    }
</style>